<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .container {
        width: 600px;
        height: 600px;
        border: 10px solid pink;
        border-radius: 10px;
        margin: 0 auto;
        position: relative;
      }

      .container div {
        width: 30%;
        height: 30%;
        background: gray;
        position: absolute;
        font-size: 50px;
        color: white;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div style="left: 2%; top: 2%">1</div>
      <div style="left: 35%; top: 2%">2</div>
      <div style="left: 68%; top: 2%">3</div>
      <div style="left: 2%; top: 35%">4</div>
      <div style="left: 35%; top: 35%">5</div>
      <div style="left: 68%; top: 35%">6</div>
      <div style="left: 2%; top: 68%">7</div>
      <div style="left: 35%; top: 68%">8</div>
      <div style="left: 68%; top: 68%">9</div>
    </div>
    <script>
      var arr = [
        "red",
        "blue",
        "yellow",
        "orange",
        "black",
        "pink",
        "gray",
        "purple",
        "green",
      ];
      let divs = document.querySelectorAll(".container div");
      divs.forEach(function (div, key) {
        div.style.backgroundColor = arr[key];
      });
      divs.forEach(function (item) {
        item.onmousedown = function (event) {
          item.style.transition = "none";
          //   避免第二拖拽有延迟
          item.style.zIndex = 10;
          //   提升权重
          var obj = {};
          var a;
          //   创建一个对象来放原来的坐标
          obj.top = item.style.top;
          obj.left = item.style.left;
          var e = event || window.event;
          var x = e.clientX - this.offsetLeft;
          var y = e.clientY - this.offsetTop;
          item.onmousemove = function (event) {
            var e = event || window.event;
            var xx = e.clientX;
            var yy = e.clientY;
            // 移动
            item.style.left = xx - x + "px";
            item.style.top = yy - y + "px";
            // 右边边距
            // containerEle.offsetWidth  containerEle.clientWidth;
            if (xnum >= containerEle.clientWidth - this.offsetWidth) {
              xnum = containerEle.clientWidth - this.offsetWidth;
            }

            // 下边距

            if (ynum >= containerEle.clientHeight - this.offsetHeight) {
              ynum = containerEle.clientHeight - this.offsetHeight;
            }

            this.style.left = xnum + "px";
            this.style.top = ynum + "px";
            var crasharr = [];
            var that = this;
            divs.forEach(function (item) {
              if (that !== item) {
                if (
                  Math.abs(item.offsetLeft - that.offsetLeft) <
                    that.offsetWidth &&
                  Math.abs(item.offsetTop - that.offsetTop) < that.offsetHeight
                ) {
                  crasharr.push(item);
                }
              }
            });
            // console.log(crasharr);
            var count = 0;
            // 碰撞面积
            crasharr.forEach(function (item) {
              var w =
                that.offsetWidth - Math.abs(item.offsetLeft - that.offsetLeft);
              var h =
                that.offsetHeight - Math.abs(item.offsetTop - that.offsetTop);

              var res = w * h;

              console.log(res);
              if (res > count) {
                count = res;
                a = item;
              }
            });
            console.log(a);
          };

          document.onmouseup = function () {
            item.onmousemove = "";
            item.style.zIndex = 0;
            // 回到原来的位置
            item.style.left = a.style.left;
            item.style.top = a.style.top;

            item.style.transition = "all 1s";
            a.style.left = obj.left;
            a.style.top = obj.top;
            a.style.transition = "all 1s";
          };
        };
      });
    </script>
  </body>
</html>
